<script setup lang="ts">

import {onMounted} from "vue";

onMounted(function () {
  document.getElementById("inputDeep")?.addEventListener("input", () => {
    this.style.height = 'auth'
    this.style.height = this.scrollHeight + 'px'
  })
})

</script>

<template>
  <div class="main">
    <el-main class="main-content border">
      <div class="main-content-view border"></div>
      <div class="main-content-input border">
        <div class="main-content-input-btn">
          <div class="main-content-input-btn-one">
            <el-button type="text">
              <img src="@/assets/image/emj.svg" alt="">
            </el-button>
            <el-button type="text">
              <img src="@/assets/image/file.svg" alt="">
            </el-button>
            <el-button type="text">
              <img src="@/assets/image/crop.svg" alt="">
            </el-button>
            <el-button type="text">
              <img src="@/assets/image/chat.svg" alt="">
            </el-button>
          </div>
          <div class="main-content-input-btn-two">
            <el-button type="text">
              <img src="@/assets/image/phone.svg" alt="">
            </el-button>
            <el-button type="text">
              <img src="@/assets/image/vidio.svg" alt="">
            </el-button>
          </div>
        </div>
        <div class="main-content-input-text">
          <textarea rows="2" id="inputDeep" class="inputDeep"/>
        </div>
        <div class="main-content-input-submit">
          <el-button>发送(S)</el-button>
        </div>
      </div>
    </el-main>
  </div>
</template>

<style scoped>


.main .main-content {
  background: #f5f5f5;
  height: calc(100vh - 60px);
}

.main .main-content .main-content-view {
  height: calc(100vh - 200px);
}

.main .main-content .main-content-input {
  padding-left: 20px;
  height: 130px;
}

.main .main-content .main-content-input .main-content-input-btn{
  width: 94%;
  display: flex;
}

.main .main-content .main-content-input .main-content-input-btn .main-content-input-btn-two{
  margin-left: auto;
}

.main .main-content .main-content-input .main-content-input-submit {
  height: 30px;
  display: flex;
  width: 90%;
  justify-content: right;
}

.main .main-content .main-content-input .main-content-input-submit button {
  width: 100px;
  background: #e9e9e9;
  color: #62d197;
  border: none;
  resize: none;
  outline: none;
}

.main .main-content .main-content-input .main-content-input-submit button:hover{
  background: #d2d2d2;
}

.main .main-content .main-content-input button {
  margin-top: 5px;
  margin-right: -10px;
  height: 30px;
  width: 30px;
}

.main .main-content .main-content-input button img {
  width: 20px;
}

.main .main-content .main-content-input .main-content-input-text {
  margin-top: 10px;
}

.inputDeep {
  width: 98%;
  border: none;
  resize: none;
  outline: none;
  background: #f5f5f5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 15px;
}
</style>